﻿<!DOCTYPE HTML>

<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <!-- EasyUI framework -->
    <link rel="stylesheet" href="js/easyui/1.3.2/themes/default/easyui.css">
    <link rel="stylesheet" href="js/easyui/1.3.2/themes/icon.css">
    <script src="js/easyui/1.3.2/jquery-1.8.0.min.js"></script>
    <script src="js/easyui/1.3.2/jquery.easyui.min.js"></script>

    <!-- JavaScript DataSnap framework -->
    <script type="text/javascript" src="js/base64.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/serverfunctionexecutor.js"></script>
    <script type="text/javascript" src="js/connection.js"></script>
    <script type="text/javascript" src="<#serverfunctionsjs>"></script>

    <style>
      .north-left    { position:absolute; left:15px; top:1; }
      .north-left h1 { color:#283747; }
      .north-right   { position:absolute; right:5px; top:1; text-align:right; }
      .north-right p { line-height:3.6em;}
      .north-right a { color:#283747; margin:0 5px; text-decoration:none; font-size:1.4em }
    </style>

    <!-- 模板變數 -->
    <script>
      loginRequired = <#loginRequired>;
      setConnection('<#host>', '<#port>', '<#urlpath>');

      function serverMethods() {
        return new <#classname>(connectionInfo);
      }
    </script>
    <!-- Main form 使用 -->
    <script src="js/main-form.js"></script>
  </head>

  <body id="mainBody" class="easyui-layout" onload="onload()">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
    <div class="north-left"><h1>歡迎使用 DataSnap + EasyUI 展示系統</h1></div>
    <div id="logoutdiv" class="north-right"><p><a href="#" onclick="onLogout()">登出</a></p></div>
  </div>
	<div id="westDiv" data-options="region:'west',split:true,title:'系統選單',collapsed:true" style="width:200px">
    <div class="easyui-accordion" fit="true">
      <div title="前端EasyUI介紹">
        <ul id="treeMenu" class="easyui-tree"></ul>
      </div>
      <div title="AJAX JS DataSnap 框架介紹">
        <ul id="treeJSDSMenu" class="easyui-tree"></ul>
      </div>
    </div>
  </div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px">south region</div>
	<div data-options="region:'center',title:'Center'">
    <div
      id="logindiv"
      class="easyui-window"
      title="Login"
      data-options="minimizable:false,collapsible:false,maximizable:false,closable:false,draggable:false,modal:true"
      style="width:400px;margin:0 auto;"
    >
      <form style="padding:10px 30px;" onsubmit="onLogin(); return false;">
        <table class="authtable">
          <tr>
            <td>登入帳號：</td>
            <td><input id="userField" class="easyui-textbox" type="text" style="width:200px" value="Admin" /></td>
          </tr>
          <tr>
            <td>登入密碼：</td>
            <td><input id="passwrdField" class="easyui-textbox" type="password" style="width:200px" value="1234" /></td>
          </tr>
        </table>
        <div id="loginError" class="errorMsg"></div><br />
        <input id="loginButton" type="submit" value="LOG IN" autofocus />
      </form>
    </div><!--logindiv-->
    <div id="contentdiv" style="display:none;width:100%;height:100%">
      <div id="contentTabs" class="easyui-tabs" fit="true" plain="true">
          <div title="首頁" style="margin:20px">
            <h1>白髮漁樵江渚上，慣看秋月春風，一壺濁酒喜相逢。<br />古今多少事，都付笑談中。</h1>
          </div>
      </div><!--contentTabs-->
    </div><!--contentDiv-->
  </div>
  </body>
</html>

